<template>
    <div class="sharedanlist">
        <sticky>
            <tab>
                <tab-item v-for="(item,index) in tabs" :key="index"  active-color='#fc378c' :selected="tabs[sindex] === item"
                          @on-item-click="tabclick">{{item.title}}
                </tab-item>
            </tab>
        </sticky>
        <div class="container">
            <scroller
                    :on-refresh="refresh"
                    :on-infinite="infinite">
                <section v-for="(itemb,index) in tabs" :key="index" v-show="tabs[sindex] === itemb">
                    <ul>
                        <li v-for="(item,index) in itemb.items" :key="index" @click="jumpfn(item)">
                            <div class="header">
                                <img :src="item.author.avatar||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'"
                                     alt="">
                                <p>
                                    <strong>{{item.author.nick}}</strong>
                                    <b>{{item.create}}</b>
                                </p>
                            </div>
                            <p class="intro">{{item.remark}}</p>
                            <template v-if="item.diPlan">
                                <section>
                                    <p class="headertitle">
                                        <img :src="item.lotteryIcon" :alt="item.lotteryName">
                                        <span>{{item.lotteryName}}</span>
                                        <span>第{{item.issueName}}期</span>
                                        <i><img :src="[item.jh,item.diPlan,item.state]|getstate"
                                        ></i>
                                    </p>
                                    <aside>
                                        <p>
                                            <span>跟单人数：<strong>{{item.betFollower}}人</strong></span><span>跟单金额：<strong>{{item.followBetMoney}}元</strong></span>
                                        </p>
                                        <p><span>跟单奖金：<em>{{item.followBetWonMoney}} <b>元</b></em></span></p>
                                    </aside>
                                </section>
                            </template>
                            <template v-else>
                                <section>
                                    <p class="headertitle">
                                        <img :src="item.lotteryIcon" :alt="item.lotteryName">
                                        <span>{{item.lotteryName}}</span>
                                        <span>第{{item.issueName}}期</span>
                                        <i><img :src="[item.jh,item.diPlan,item.state]|getstate"
                                        ></i>
                                    </p>
                                    <aside>
                                        <p>
                                            <span>方案金额：<strong>{{item.betMoney}}元</strong></span><span
                                                v-if="item.state===5">本单盈利率：<strong>{{item.profitRate}}</strong></span>
                                        </p>
                                        <p v-if="item.state===5">
                                            <span>税后奖金：<em>{{item.betWonMoney}} <b>元</b></em></span>
                                        </p>
                                    </aside>
                                </section>
                            </template>
                            <p class="footer">
                                <span><icon name="zan"></icon>{{item.likes}}</span>
                                <span><icon name="message"></icon>{{item.comments}}</span>
                            </p>
                        </li>
                    </ul>
                </section>
            </scroller>
        </div>
    </div>
</template>

<script>
    import {Marquee, MarqueeItem, Toast, Tab, TabItem, Sticky} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative, h5tonative} from '../../utils/otherfn';
    import {getsharenew, getsharejh} from '../../services/huodong/sharedan';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    import {delay} from '../../utils/common';
    import {concat} from 'ramda';
    export default {
        components: {
            Marquee,
            MarqueeItem,
            Toast,
            Tab,
            TabItem,
            Sticky
        },
        data() {
            return {
                tabs: [
                    {title: '最新', page: 1, items: [], fn: getsharenew},
                    {title: '精华', page: 1, items: [], fn: getsharejh}
                ],
                sindex: 0,
            };
        },
        filters: {
            getstate: function ([jh,diPlan,state]) {
                if(jh) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/20180105171748.png'
                }
                if(diPlan) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/20180105110946.png'
                }
                if(state === 6) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/20180105111705.png'
                }
                if(state === 5) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/20180105111619.png'
                }

            }
        },
        created() {
            this.getlists(1);
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            jumpfn(item){
                const {diPlan, id, schemeId, author:{uid}}=item;
                if(diPlan) {
                    h5tonative('神单详情', `${location.origin}/#/god/goddetails/${uid}/${schemeId}`, ()=> {
                        location.href = `${location.origin}/#/god/goddetails/${uid}/${schemeId}`;
                    });
                }
                else {
                    h5tonative('晒单详情', `${location.origin}/tg/#/huodongland/dandetails/${id}`, ()=> {
                        location.href = `${location.origin}/tg/#/huodongland/dandetails/${id}`;
                    })
                }
            },
            async tabclick(index){
                this.sindex = index;
                const {tabs, sindex}=this;
                if(tabs[sindex].items.length === 0) {
                    await this.getlists(1);
                }
            },
            async refresh(done){
                await delay(1000);
                await this.getlists(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                const {sindex, tabs}=this;
                tabs[sindex].page = tabs[sindex].page + 1;
                const over = await this.getlists(tabs[sindex].page, true);
                if(over) {
                    tabs[sindex].page = tabs[sindex].page - 1;
                    done(true);
                    return;
                }
                done();
            },
            async getlists(page, loadermore){
                const {token}=await getMytoken(true);
                const {tabs, sindex}=this;

                const {data}= await tabs[sindex].fn(token, page);
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.value.length === 0) {
                            return true;
                        }
                        else {
                            tabs[sindex].items = concat(tabs[sindex].items, data.data.value);
                        }
                    }
                    else {
                        tabs[sindex].page = 1;
                        tabs[sindex].items = data.data.value;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .sharedanlist {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        .container {
            display: flex;
            flex-direction: column;
            flex: 1;
            height: 100%;
            position: relative;
        }
        ul {
            li {
                background: #fff;
                margin-bottom: 20px;
                padding: 30px;
                padding-bottom: 0;
                .header {
                    display: flex;
                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    p {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        strong {
                            font-size: 32px;
                            line-height: 1;
                        }
                        b {
                            font-size: 24px;
                            color: #999;
                        }
                    }

                }
                .intro {
                    padding: 20px 0;
                    font-size: 32px;
                }
                section {
                    background: #fdf2eb;
                    border: 2px solid #ffd9b9;
                    box-sizing: border-box;
                    .headertitle {
                        border-bottom: 1px solid #ffd9b9;
                        box-sizing: border-box;
                        height: 78px;
                        display: flex;
                        align-items: center;
                        padding: 0 30px;
                        position: relative;
                        img {
                            width: 60px;
                            height: 60px;
                            border-radius: 50%;
                            margin-right: 20px;
                        }
                        span {
                            margin-right: 20px;
                        }
                        i {
                            position: absolute;
                            right: 10px;
                            top: -30px;
                            width: 120px;
                            height: 112px;
                            img {
                                width: 100%;
                                height: 100%;
                                display: block;
                            }
                        }
                    }
                    aside {
                        padding: 30px;
                        p {
                            display: flex;
                            span {
                                flex: 1;
                                font-size: 28px;
                                strong {
                                    color: #ff405c;
                                }
                                em {
                                    font-size: 38px;
                                    color: #ff405c;
                                    b {
                                        font-size: 28px;
                                    }
                                }
                            }
                        }
                    }
                }
                .footer {
                    height: 73px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    color: #999;
                    span {
                        margin-left: 30px;
                        font-size: 24px;
                        display: flex;
                        align-items: center;
                        svg {
                            width: 40px;
                            height: 40px;
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }

</style>